<template>
   <!-- 页头 -->
   <el-page-header :icon="null" @back="backout">
    <template #content>
      <div class="flex items-center">

        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          审核统计
        </span>
        <el-tag>admin</el-tag>
      </div>
      
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-space :size="size" :spacer="spacer">
          <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Admin
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @beathub.com
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            生产队的驴正在加紧赶工......
          </p>
        </div>
      </template>
    </el-popover>
      </el-space>
        <el-button type="danger" plain class="ml-2" @click="logout">退出</el-button>
      </div>
    </template>
  </el-page-header>
  <el-divider content-position="right">管理员操作</el-divider>
  <!-- 首行数据统计卡片 -->
  <el-card width="100%">
    <el-row>
      <el-col :span="6">
        <el-statistic title="已通过" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic :value="138">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              未通过
              <el-icon style="margin-left: 4px" :size="12">
                <Male />
              </el-icon>
            </div>
          </template>
          <template #suffix>/100</template>
        </el-statistic>
      </el-col>
      <el-col :span="6">
        <el-statistic title="已审核" :value="172000" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="待审核" :value="562">
          <template #suffix>
            <el-icon style="vertical-align: -0.125em">
              <ChatLineRound />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
    </el-row>
  </el-card>
  <br>
<!-- 数据统计图表 -->

<el-row><el-col :span="10">
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>统计图表</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
    <div id="c"  style="height:41vh;width: 500px;"></div>
    <template #footer>Footer content</template>
  </el-card>
</el-col>

<el-col :span="10">
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>统计图表</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
    <div id="d" style="height:41vh;width: 500px"></div>
    <template #footer>Footer content</template>
  </el-card>
</el-col>

<el-col :span="4">
  <!-- <el-card class="box-card">
    <el-countdown format ="DD [days] HH:mm:ss" :value="value2">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            <el-icon style="margin-right: 4px" :size="12">
              <Calendar />
            </el-icon>
            Still to go until next month
          </div>
        </template>
      </el-countdown>
      <div class="countdown-footer">{{ value2.format('YYYY-MM-DD') }}</div>  
    </el-card> -->
</el-col>
</el-row>

  <el-row><el-col :span="12">
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>统计图表</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
    <div id="a"  style="height:35vh;width: 550px;"></div>
    <template #footer>Footer content</template>
  </el-card>
</el-col>

<el-col :span="12">
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>统计图表</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
    <div id="b" style="height:35vh;width: 550px"></div>
    <template #footer>Footer content</template>
  </el-card>
</el-col></el-row>

</template>
   
<script>
// Echarts5 导入方式
import * as echarts from 'echarts'
import { ChatLineRound, Male } from '@element-plus/icons-vue'
import { ref } from 'vue'
import dayjs from 'dayjs'
import { Calendar } from '@element-plus/icons-vue'
const value2 = ref(dayjs().add(1, 'month').startOf('month'))
import { h } from 'vue'
import { ElDivider } from 'element-plus'
import { useRouter } from 'vue-router';

// const router = useRouter();
export default {

  setup() {
      const size = ref(50)
      const spacer = h(ElDivider, { direction: 'vertical' })

      // 在这里可以进行其他的逻辑设置

      return {
        size,
        spacer,
        // 其他需要暴露给模板的属性
      }
    },
  mounted() {
    //调用methods中的init方法
    this.init()  //a 柱形图
    this.init2() //b 整合图
    this.init3() //c 饼图 1
    this.init4() //d 饼图 2


    
  },
  methods: {
    center(){
      this.$router.push('admincenter')
    },
    logout() {
      this.$router.push('/');
    },
    backout() {
      this.$router.push('/welcome');
    },
    init() {
      //使用 ref 的方式
      //一定要分清楚ref 和 id的关系 ,l两者使用一个即可
      //let mychart = this.$echarts.init(this.$refs.b)   
      let chartDom = document.getElementById('a');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      option && myChart.setOption(option);
    },
    init2() {
      let chartDom = document.getElementById('b');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };
      option && myChart.setOption(option);


    },
    init3(){
      let chartDom = document.getElementById('c');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [30, 130],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
};
option && myChart.setOption(option);

    },
    init4(){
      let chartDom = document.getElementById('d');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
option && myChart.setOption(option);

    }
  }
}
</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 95%;

}

.el-col {
  text-align: center;
}

.countdown-footer {
  margin-top: 8px;
}
.custom-button {
  border: none; /* 去掉边框 */
  padding: 0;   /* 去掉内边距 */
  margin-left:12px; /* 左移10像素，根据需要调整 */
  background-color: transparent; /* 使背景透明，以便不显示默认按钮背景颜色 */
  cursor: pointer; /* 显示指针样式，表明是可点击的 */
}
</style>